<template>
  <div id="cart">
    <cart-header>
      <template v-if="compile">
        <span class="lqicon">领券</span>
        <span class="right-text" @click="onCompile">编辑</span>
      </template>
      <template v-else>
        <span class="right-text" @click="accomplish">完成</span>
      </template>
    </cart-header>
    <div class="bg"></div>
    <service-policy></service-policy>
    <cart-good v-if="$store.state.cartList.length > 0"></cart-good>
    <default-page v-if="$store.state.cartList.length === 0"></default-page>
    <cart-bottom-bar v-if="$store.state.cartList.length > 0">
      <template v-if="compile">
        <div :class="$store.state.checked ? 'atext' : 'uatext'">下单</div>
        <span class="sum">合计：{{ "¥" + $store.state.allPrice }}</span>
      </template>
      <template v-else>
        <div
          :class="$store.state.checked ? 'atext' : 'uatext'"
          @click="deleteItem"
        >
          删除所选
        </div>
      </template>
    </cart-bottom-bar>
  </div>
</template>
<script>
import CartHeader from "components/cart/CartHeader";
import ServicePolicy from "components/cart/ServicePolicy";
import DefaultPage from "components/cart/DefaultPage";
import CartGood from "components/cart/CartGood";
import CartBottomBar from "components/cart/CartBottomBar";

export default {
  name: "Cart",
  data() {
    return {
      compile: true,
    };
  },
  methods: {
    onCompile() {
      this.compile = !this.compile;
      this.$store.dispatch("compile");
    },
    accomplish() {
      this.compile = !this.compile;
      this.$store.dispatch("accomplish");
    },
    deleteItem() {
      if (this.$store.state.checked) {
        this.$dialog
          .confirm({
            // title: "标题",
            message: "要删除所选的商品？",
          })
          .then(() => {
            // on confirm
            while (this.$store.state.checked) {
              for (let i = 0; i < this.$store.state.cartList.length; i++) {
                if (this.$store.state.cartList[i].isChecked) {
                  this.$store.dispatch("deleteItem", i);
                  break;
                }
              }
            }
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
  components: {
    CartHeader,
    ServicePolicy,
    DefaultPage,
    CartGood,
    CartBottomBar,
  },
};
</script>
<style scoped>
.lqicon {
  display: inline-block;
  margin-right: 15px;
  color: #fff;
  width: 36px;
  height: 19px;
  background-color: #fc625f;
  font-size: 12px;
  text-align: center;
  line-height: 19px;
}
.right-text {
  font-size: 15px;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #eee;
  text-align: center;
}
.atext {
  float: right;
  width: 113px;
  height: 59px;
  background-color: var(--theme-color);
  color: #fff;
}
.uatext {
  float: right;
  width: 113px;
  height: 59px;
  background-color: #ccc;
  color: #fff;
}
.sum {
  float: right;
  color: var(--theme-color);
}
</style>